<template>
  <view class="quality-page">
    <view class="header">
      <table class="details-page-table">
        <tr>
          <td class="label-td">对应单据</td>
          <td>仓储</td>
          <td class="label-td">单据编号</td>
          <td>{{ orderNumber }}</td>
        </tr>

        <tr>
          <td class="label-td">备注</td>
          <td colspan="5">
            <textarea
              class="textarea-style"
              placeholder-style="color:#ddd"
              placeholder="输入备注信息..."
            />
          </td>
        </tr>
      </table>
      <view class="title">
        <text>质检单设备扩展</text>
        <text class="add-btn" @click="openOperation">+ 添加质检单设备扩展</text>
      </view>
    </view>
    <view class="content">
      <scroll-view scroll-y="true" class="scroll-view-style1">
        <view
          v-for="(item, index) in activeDeviceList"
          :key="index"
          class="list-item"
        >
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>序号：</text> <text>{{ index + 1 }}</text></view
            >
            <view class="list-item-line-text del" @click="deleteDevice(item)">
              删除</view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>设备编号：</text> <text>{{ item.name }}</text></view
            >
            <view class="list-item-line-text">
              <text>设备名称：</text> <text>{{ item.code }}</text></view
            >
          </view>
        </view>
      </scroll-view>
    </view>
    <uni-popup
      ref="popup"
      type="bottom"
      @maskClick="closeOperation"
      border-radius="10px 10px 0 0"
    >
      <view class="popup-zzc">
        <view class="popup-content">
          <input
            class="uni-input"
            @confirm="confirmOperation"
            focus
            placeholder="请输入设备编号"
          />
          <view class="popup-list" v-if="this.deviceList.length > 0">
            <scroll-view scroll-y="true" style="height: 100%">
              <view v-for="(item, index) in deviceList" :key="index">
                <text class="popup-item" @click="selectedFn(item)">{{
                  item.name
                }}</text>
              </view>
            </scroll-view>
          </view>
          <text class="no-data" v-else>暂无设备数据</text>
        </view>
      </view>
    </uni-popup>

    <view class="bottom-btn">
      <!-- 取消和确认按钮 -->
      <view class="btn" @click="cancelPage">取消</view>
      <view class="confirm-btn btn" @click="confirmPage">确认</view>
    </view>
  </view>
</template>

<script>
import { getDeviceName, generateQuality } from "@/service/index";
import { buildGetUrl } from "@/common/utils";
import {
  STORAGE_KEY,
  RESPONSE_CODE,
  INBOUND_TYPE,
  PRODUCT_TYPE,
  ORDER_TEXT,
} from "@/common/constant";
export default {
  data() {
    return {
      orderNumber: "",
      deviceList: [],
      activeDeviceList: [],
    };
  },
  onLoad(options) {
    this.orderNumber = options.orderNumber;
    uni.setNavigationBarTitle({
      title: `填报质检-${this.orderNumber}`,
    });
    // this.loadData();
  },
  methods: {
    cancelPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 删除选中设备
    deleteDevice(item) {
      //    从activeDeviceList中删除item
      this.activeDeviceList = this.activeDeviceList.filter(
        (device) => device.id !== item.id
      );
      uni.showToast({
        title: "删除设备成功",
        icon: "none",
      });
    },
    async confirmPage() {
      const checkBillExtraDevices = this.activeDeviceList.map((item) => {
        return {
          deviceId: item.id,
        };
      });
      const params = {
        checkAmount: 0,
        passAmount: 0,
        checkBillExtraDevices,
        srcOrder: this.orderNumber,
        srcType: "warehouse",
      };
      const res = await generateQuality(params);
      if (res.code === RESPONSE_CODE.SUCCESS) {
        uni.showToast({
          title: "新增成功",
          icon: "none",
        });
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    closeOperation() {
      this.deviceList = [];
    },
    openOperation() {
      this.$refs.popup.open();
    },
    // 输入框点击确认时触发，检索
    confirmOperation(event) {
      const params = {
        name: event.detail.value,
      };
      const query = buildGetUrl(params);
      getDeviceName(query).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          this.deviceList = res.data.list;
        }
      });
    },
    selectedFn(target) {
      if (this.activeDeviceList.some((item) => item.id === target.id)) {
        // 提示
        uni.showToast({
          title: "该设备已添加",
          icon: "none",
        });
        return;
      }
      //   追加选中设备
      this.activeDeviceList.push(target);
    },
  },
};
</script>

<style lang="less" scoped>
.quality-page {
  .header {
    background: #ecf5ff;
    padding: 10rpx;
    padding-bottom: 0rpx;
    .title {
      display: flex;
      margin-top: 20rpx;
      justify-content: space-between;
      font-size: 24rpx;
      line-height: 40rpx;
      text {
        color: #777;
      }
      .add-btn {
        border: 1rpx solid #409eff;
        padding: 0 20rpx;
        border-radius: 20rpx;
        color: #409eff;
      }
    }
  }
  .details-page-table {
    width: 100%;
    // 边框合并
    border-collapse: collapse;
    font-size: 20rpx;
    color: #777;
    background: #fff;
    border-radius: 14rpx;
    tr,
    td {
      line-height: 40rpx;
      border: 1rpx solid #eee;
    }
    td:nth-child(odd) {
      text-align: center;
      background-color: #ebeef5;
    }
    td:nth-child(even) {
      padding-left: 10rpx;
    }
    .label-td {
      width: 100rpx;
    }
  }
  .textarea-style {
    font-size: 20rpx;
    height: 100rpx;
  }
  .scroll-view-style1 {
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;
  }
  .content {
    height: calc(100vh - 300rpx);
    background: #ecf5ff;

    .list-item {
      font-size: 12px;
      margin-bottom: 10rpx;
      background: #fff;
      border-radius: 14rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      .list-item-line {
        display: flex;
        justify-content: space-between;
        line-height: 50rpx;
        color: #777;
        .del {
          color: red;
        }
      }
    }
  }
  .popup-zzc {
    padding: 0 10rpx 10rpx 10rpx;
    .popup-content {
      background: #fff;
      height: 400rpx;
      border-radius: 10rpx;
      padding: 10rpx;
      .uni-input {
        height: 60rpx;
        padding-left: 20rpx;
        font-size: 24rpx;
        border: 1rpx solid #eee;
      }
      .popup-list {
        height: 320rpx;
        padding-top: 20rpx;
        box-sizing: border-box;
        .popup-item {
          display: block;
          margin-bottom: 10rpx;
          font-size: 24rpx;
          line-height: 50rpx;
          padding: 0 20rpx;
          color: #333;
          background: #eee;
          width: 100%;
          border-radius: 10rpx;
          box-sizing: border-box;
        }
      }
      .no-data {
        display: block;
        text-align: center;
        line-height: 100rpx;
        font-size: 26rpx;
        color: #777;
      }
    }
  }
  .bottom-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    display: flex;
    .btn {
      flex: 1;
      text-align: center;
      line-height: 80rpx;
      background: #f0f0f0;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }
}
</style>
